<template>
	<view class="container">
		<view class="content">
			<owner-info :item="carInfo"></owner-info>
			<view class="order-info">
				<text class="txt1">订单信息</text>
				<view class="txt2">
					<text class="txt2-1">销售</text>
					<text class="txt2-2">{{orderInfo.employeeName}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">业务渠道</text>
					<text class="txt2-2">{{orderInfo.businessName}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">订单编号</text>
					<text class="txt2-2">{{orderInfo.saleId}}</text>
				</view>
				<view class="txt2">
					<text class="txt2-1">下单时间</text>
					<text class="txt2-2">{{orderInfo.createTime}}</text>
				</view>
			</view>
			<view class="add-info">
				<view class="title">
					<text class="txt">车辆照片(正面、侧面45°、侧后45°、背面)</text>
				</view>
				<view class="photo-content">
					<template v-for="(item,index) in carPhtoto" :key="index">
						<image class="photo" :src="item" mode="aspectFill" @click="previewImage(carPhtoto,index)">
						</image>
					</template>
				</view>
			</view>
		</view>

		<view class="add-info">
			<view class="title">
				<text class="txt">服务项目</text>
			</view>
			<u-swipe-action>
				<u-swipe-action-item :show="swipeShow" v-for="(item,index) in orderService" :key="item.serviceItemId"
					closeOnClick :options="options1" @click="update_service(item,index)">
					<view class="chosenContent">
						<view class="top">
							<view class="serv">
								<text class="service">{{item.name}}</text>
								<text v-if="item.productSku" class="product">{{item.productSku.productName}}</text>
							</view>
						</view>
						<view style="display: flex;align-items:center; padding: 5rpx 0;">
							<text v-if="item.productSku" class="price1">{{item.productSku.totalPrice}}</text>
							<text v-else class="price1">{{item.actualPrice}}</text>
							<text class="price2">元</text>
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>

		<view class="add-info">
			<view class="title">
				<text class="txt">收款记录</text>
			</view>
			<view class="chosenContent">
				<view class="top">
					<view class="serv">
						<text class="service">应付款</text>
					</view>
				</view>
				<view style="display: flex;align-items: center; padding: 5rpx 0;">
					<text class="price1">{{totalPrice}}</text>
					<text class="price2">元</text>
				</view>
			</view>
			<view class="chosenContent">
				<view class="top">
					<view class="serv">
						<text class="service">实付款</text>
					</view>
				</view>
				<view style="display: flex;align-items: center; padding: 5rpx 0;">
					<input style="color: #00aa7f;" class="price1" v-model="payPrice" @input="pay_input" placeholder="0"
						placeholder-class="place" />
					<text class="price2">元</text>
				</view>
			</view>
			<view class="chosenContent">
				<view class="top">
					<view class="serv">
						<text class="service">支付方式</text>
					</view>
				</view>
				<view style="display: flex;align-items: center; padding: 5rpx 0;">
					<text style="color: #00aa7f;" v-if="payTypeTxt == '点击选择'" class="price2"
						@click="selectShow = true">{{payTypeTxt}}</text>
					<text v-else class="price1" style="width: auto;color: #00aa7f;"
						@click="selectShow = true">{{payTypeTxt}}</text>
				</view>
			</view>
			<view class="chosenContent">
				<view class="top">
					<view class="serv">
						<text class="service">未付款</text>
					</view>
				</view>
				<view style="display: flex;align-items: center;">
					<text class="price1" style="color: #FF602B;">{{totalPrice- payPrice}}</text>
					<text class="price2">元</text>
				</view>
			</view>
		</view>

		<view class="add-info">
			<view class="title">
				<text class="txt">施工主管</text>
				<image class="add" src="https://peixin.peiyu.online/xmk/images/添加.png" mode="heightFix"
					@click="add_manager"></image>
			</view>

			<view v-if="'name' in store.selectedManager" class="chosenContent">
				<view class="manager">
					<image v-if="'avatar' in store.selectedManager" :src="store.selectedManager.avatar"
						mode="heightFix">
					</image>
					<text class="name">{{store.selectedManager.name}}</text>
				</view>
			</view>

		</view>

		<view class="btn" @click="arrenge">
			安排订单
		</view>
	</view>
	<up-picker closeOnClickOverlay :show="selectShow" :columns="payTypeList" keyName="label" @cancel="selectShow=false"
		@confirm="confirm" @close="selectShow=false"></up-picker>
</template>
<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		api_get_order_easy_info,
		api_saleOrder_getInfo,
		api_saleOrder_update,
		api_saleOrder_setManager,
		api_saleOrder_updateBuildStatus,
		api_saleOrder_updateOrderStatus,
		api_payType_list,
		api_settlementItem_add
	} from "../../../../apis/apis.js"
	import {
		useMainStore
	} from '@/utils/store.js';
	import {
		regExp
	} from '../../../../uni_modules/uview-plus/libs/function/test.js';

	const store = ref(useMainStore());
	const carInfo = ref({}); //订单简易信息
	const orderInfo = ref({}); //订单其他信息
	const orderService = ref([]); //订单选择的服务
	const carPhtoto = ref([]); //订单车辆图片
	const swipeShow = ref(false);
	const totalPrice = ref(); //总价（应付款)
	const payPrice = ref(0) //已付款
	const selectShow = ref(false); //数据选择器
	const payType = ref(0); //支付方式
	const payTypeList = ref([]); //付款方式列表
	const payTypeTxt = ref("点击选择");


	//左滑操作
	const options1 = reactive([{
		text: '修改',
		style: {
			backgroundColor: '#55a8f5'
		}
	}]);

	const options2 = reactive([{
		text: '删除',
		style: {
			backgroundColor: '#f56c6c'
		}
	}]);



	//点击数据选择器的确定
	const confirm = (e) => {
		console.log('confirm', e);
		selectShow.value = false;
		payType.value = e.value[0].id;
		payTypeTxt.value = e.value[0].label;
	};


	//点击预览图片
	const previewImage = (photoTemPath, index) => {
		uni.previewImage({
			current: index,
			urls: photoTemPath
		});
	};

	//填写已支付金额
	const pay_input = () => {
		if (payPrice.value > totalPrice.value) {
			uni.showToast({
				title: "价格超出",
				icon: "error"
			});
			payPrice.value = totalPrice.value;
		}
	}

	//修改服务操作 => 只能改价格，暂时不加入修改已选择的服务项目
	const update_service = (item, index) => {
		swipeShow.value = false
		uni.navigateTo({
			url: `/pages/salesman/order-list/order-arrange/order-update/order-update?name=${item.name}&orderServiceId=${item.orderServiceId}`,
		});
	};

	//点击添加主管
	const add_manager = () => {
		uni.navigateTo({
			url: "/pages/salesman/order-list/order-arrange/manager-list/manager-list"
		})
	};


	//点击安排订单
	const arrenge = () => {
		//已经选择了主管
		if ('id' in store.value.selectedManager && payPrice.value != 0 && payTypeTxt.value != "点击选择") {
			uni.showModal({
				title: "确定安排订单？",
				success: async (res) => {
					if (res.confirm) {
						//添加主管
						try {
							await api_saleOrder_setManager({
								saleId: orderInfo.value.saleId,
								managerId: store.value.selectedManager.id
							});
							//修改订单施工状态为待指派师傅
							try {
								await api_saleOrder_updateBuildStatus({
									saleId: orderInfo.value.saleId,
									buildStatus: 2
								});
								//更改订单支付情况
								try {
									await api_settlementItem_add({
										orderSettlementId: orderInfo.value
											.orderSettlement.orderSettlementId,
										amountPay: payPrice.value,
										type: payType.value
									});
									//修改支付状态 根据已付款自动判断
									try {
										await api_saleOrder_updateOrderStatus({
											saleId: orderInfo.value
												.saleId,
											orderStatus: payPrice
												.value ==
												totalPrice.value ?
												1 : 0
										});
										uni.navigateBack({
											delta: 1,
											success: () => {
												uni.showToast({
													title: "安排成功",
													icon: "success"
												})
											}
										});
									} catch (e) {
										uni.showToast({
											title: e.msg,
											icon: "none"
										});
									}
								} catch (e) {
									uni.showToast({
										title: e.msg,
										icon: "none"
									});
								}
							} catch (e) {
								uni.showToast({
									title: e.msg,
									icon: "none"
								});
							}
						} catch (e) {
							uni.showToast({
								title: e.msg,
								icon: "none"
							});
						}
					}
				}
			});
		} else {
			uni.showToast({
				title: "请完善信息",
				icon: "error"
			});
			return;
		}
	};

	onShow(async () => {
		let param = {
			saleId: store.value.orderId
		};
		//查询订单简易信息
		try {
			let res1 = await api_get_order_easy_info(param);
			carInfo.value = res1.data;
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}
		//查询订单其他信息
		try {
			let res2 = await api_saleOrder_getInfo(param);
			orderInfo.value = res2.data; //订单其他信息
			orderService.value = res2.data.orderService.serviceItemList; //订单的服务项目
			totalPrice.value = res2.data.orderService.actualPrice; //获取总价
			carPhtoto.value = JSON.parse(res2.data.carImage); //订单的汽车图片
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}

		if (payPrice.value > totalPrice.value) { //两个价格判断
			uni.showToast({
				title: "价格超出",
				icon: "error"
			});
			payPrice.value = totalPrice.value; //强行更正为最大值(总价)
		}
	});

	onLoad(async () => {
		try {
			let res = await api_payType_list({ //获取支付方式列表
				type: 2
			});
			let li = [];
			li.push(res.data.map(item => ({
				id: item.id,
				label: item.name
			})))
			payTypeList.value = li;
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}
	});

	onUnload(() => {
		console.log("页面卸载");
		store.value.clear_oderInfo();
		store.value.clear_selectedManager();
	});
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: calc(calc(env(safe-area-inset-bottom)) + 10rpx);

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #ededf4;
			width: 750rpx;
			padding-top: 36rpx;
			height: auto;

			.order-info {
				background-color: $main-background-color;
				width: 700rpx;
				height: auto;
				display: flex;
				flex-direction: column;
				align-items: left;
				gap: 10rpx;
				margin-top: 50rpx;

				.txt1 {
					font-family: Alibaba_PuHuiTi_Medium;
					font-weight: 500;
					font-size: 34rpx;
					color: $font-primary-color;
				}

				.txt2 {
					display: flex;
					align-items: center;

					.txt2-1 {
						width: 160rpx;
						font-family: Alibaba_PuHuiTi_Light;
						font-weight: 300;
						font-size: 34rpx;
						color: $font-primary-color;
						margin-right: 30rpx;
					}

					.txt2-2 {
						font-family: Alibaba_PuHuiTi_Light;
						font-weight: 300;
						font-size: 36rpx;
						color: $font-sub-color;
					}
				}
			}
		}

		.add-info {
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				width: 700rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.txt {
					font-family: Alibaba_PuHuiTi_Medium;
					font-weight: 500;
					font-size: 34rpx;
					color: $font-primary-color;
				}

				.add {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.photo-content {
				width: 700rpx;
				display: flex;
				justify-content: space-between;

				.photo {
					width: 170rpx;
					height: 170rpx;
					margin-top: 32rpx;
				}
			}

			.chosenContent {
				width: 700rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: left;

				border-bottom: 1rpx solid $border-color;

				.top {
					padding-top: 20rpx;
					width: 100%;
					// display: flex;
					// justify-content: space-between;
					align-items: center;

					.serv {
						display: flex;
						align-items: center;

						.service {
							font-family: Alibaba_PuHuiTi_Light;
							font-weight: 300;
							font-size: 34rpx;
							color: $font-primary-color;
							margin-right: 10rpx;
						}

						.product {
							font-family: Alibaba_PuHuiTi_Light;
							font-weight: 300;
							font-size: 34rpx;
							color: $font-sub-color;
						}
					}
				}
			}

			.price1 {
				font-family: Alibaba_PuHuiTi_Thin;
				font-weight: 250;
				font-size: 34rpx;
				color: $font-sub-color;
				width: 84rpx;
				text-align: center;
			}

			.price2 {
				font-family: Alibaba_PuHuiTi_Thin;
				font-weight: 300;
				font-size: 34rpx;
				color: $font-9e-color;
			}

			.manager {
				width: 100%;
				display: flex;
				align-items: center;
				padding: 10rpx 0;

				image {
					width: 40rpx;
					border-radius: 100rpx;
					overflow: hidden;
					height: 100rpx;
				}

				.name {
					font-family: Alibaba_PuHuiTi_Light;
					font-weight: 300;
					font-size: 34rpx;
					color: $font-sub-color;
					margin-left: 14rpx;
				}
			}
		}

		.btn {
			width: 700rpx;
			height: 80rpx;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: $primary-color;
			font-family: Alibaba_PuHuiTi_Regular;
			font-weight: 400;
			font-size: 38rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 50rpx;
		}
	}
</style>